<!--
 * @Author: wjk
 * @Date: 2020-01-09 16:06:59
 * @LastEditors  : wjk
 * @LastEditTime : 2020-01-14 14:31:25
 * @description: s商品服务说明
 -->
<template>
  <view class="introBox">
    <base-popup :show="pShow" :show-close="false" @close="closePopup">
      <section v-if="serviceList.length" class="maskContainer serviceMask">
        <view class="cartClose" @click="closePopup">
          <image src="/static/images/icon/icon_close.png" />
        </view>
        <view class="serviceContainer">
          <view class="title">服务说明</view>
          <view v-for="(item, index) in serviceList" :key="index" class="serverceIntroIte">
            <view class="p">{{ item.title }}</view>
            <view class="span">{{ item.content }}</view>
          </view>
        </view>
        <view class="maskBottomBtn" @click="closePopup">知道了</view>
      </section>
    </base-popup>
  </view>
</template>
<script>
export default {
  name: 'CommodityServe',
  props: {
    serviceList: {
      type: Array,
      required: true,
      default: null // 是否显示遮罩层
    }
  },
  data() {
    return {
      pShow: false
    }
  },
  methods: {
    closePopup() {
      this.$set(this, 'pShow', false)
    },
    showPopup() {
      this.pShow = true
    }
  }
}
</script>
<style lang="scss" scoped>
.serviceMask{
  .title{
    margin-bottom: 20px;
    font-size: 17px;
  }
  .serverceIntroIte{
    margin-bottom: 25px;
  }
  .p{
    margin-bottom: 10px ;
    color: $color-title;
  }
  .span{
    font-size: $font-size-small;
    line-height: 17px;
    color: $color-tags;
  }
}
</style>
